<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-11-16 15:00:33
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-12-06 10:51:46
-->
<template>
  <div class="login-box">
    <div class="login-logo">
      <img src="@/assets/images/icon_login_logo.png" />
      <div>国研营地微信小程序管理系统</div>
    </div>
    <div class="login-form">
      <a-form :model="formState" @submit.prevent="handleSubmit">
        <a-form-item>
          <a-input v-model:value="formState.username" placeholder="用户名">
            <template #prefix>
              <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model:value="formState.password" type="password" placeholder="密码">
            <template #prefix>
              <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            class="btn-submit"
            :disabled="formState.username === '' || formState.password === ''"
            :loading="formState.loading"
          >
            登 录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/store/modules/user";
import to from "@/utils/awaitTo";

const formState = reactive({
  username: "test_user",
  password: "test",
  loading: false,
});
const route = useRoute();
const router = useRouter();

const userStore = useUserStore();
const handleSubmit = async () => {
  const { username, password } = formState;
  if (username.trim() == "" || password.trim() == "") {
    return message.warning("用户名或密码不能为空");
  }
  message.loading("登录中...", 0);
  formState.loading = true;
  const [err] = await to(userStore.login(formState));
  if (err) {
    message.error(err.message);
  } else {
    message.success("登录成功");
    setTimeout(() => {
      router.replace((route.query.redirect as string) ?? "/");
    });
  }
  // if (msg === 'success') {
  //   message.success('登录成功');
  //   setTimeout(() => { router.replace((route.query.redirect as string) ?? '/'); })
  // } else {
  //   message.error(msg);
  // }
  formState.loading = false;
  message.destroy();
};
</script>

<style lang="less" scoped>
.login-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .login-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }

  .login-form {
    width: 300px;
  }

  .btn-submit {
    width: 100%;
  }
}
</style>
